<template>
  <view class="wrap flex-direction-column" :style="{ height: props.height, background: props.bg }">
    <view class="null flex-direction-column">
      <image :style="{ height: props.imgHeight, width: props.imgWidth }" :src="props.imgPath"></image>
      <text>{{ props.title }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  bg: {
    type: String,
    default() {
      return ''
    }
  },
  imgPath: {
    type: String,
    default() {
      return ''
    }
  },
  title: {
    type: String,
    default() {
      return ''
    }
  },
  height: {
    type: String,
    default() {
      return ''
    }
  },
  imgHeight: {
    type: String,
    default() {
      return ''
    }
  },
  imgWidth: {
    type: String,
    default() {
      return ''
    }
  }
})
</script>

<style lang="scss" scoped>
.wrap {
  justify-content: center;
}
.null {
  align-items: center;
  justify-content: center;
  // text-align: center;
  text {
    height: 44rpx;
    line-height: 44rpx;
    font-size: 28rpx;
    margin-top: 52rpx;
    color: #333333;
  }
}
</style>
